<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QCloud VIDEO UGC UPLOAD SDK</title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .text-danger {
      color: red;
    }

    .control-label {
      text-align: left !important;
    }

    #resultBox {
      width: 100%;
      height: 300px;
      border: 1px solid #888;
      padding: 5px;
      overflow: auto;
      margin-bottom: 20px;
    }

    .uploaderMsgBox {
      width: 100%;
      border-bottom: 1px solid #888;
    }

    .cancel-upload {
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <input id="uploadVideoNow-file" type="file" />

  <!--<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
  <script src="//unpkg.com/vod-js-sdk-v6"></script>-->
  <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader.js"></script>
    <script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>

  <script type="text/javascript">

      /**
       * 计算签名。
      **/
      var signUrl = "{$signUrl}";
      
      //signUrl = 'https://demo.vod2.myqcloud.com/ugc-upload/';
      console.log(signUrl);
      /*function getSignature() {
        return axios.post(signUrl, JSON.stringify({
        //return axios.post(signUrl, JSON.stringify({
          "Action": "GetUgcUploadSign"
        })).then(function (response) {
            console.log(response);
          return response.data.data.sign
        })
      };*/
    var getSignature = function(callback) {
        $.ajax({
            url : signUrl, //服务器获取客户端上传签名的URL
            type : "POST",
            success : function(result) {
                //result.returnData.signature为获取到的签名
                callback(result);
                //callback(result.returnData.signature);
                //console.log(result);
            }
        });
    };

    $('#uploadVideoNow-file').on('change', function(e) {
		var videoFile = this.files[0];
		var resultMsg = qcVideo.ugcUploader.start({
			videoFile : videoFile,
			getSignature : getSignature,
			allowAudio : 1,
			isTranscode: 1,
			success : function(result) {
				console.log("上传成功");
			},
			error : function(result) {
				console.log("上传失败");
			},
			progress : function(result) {
				console.log("上传进度：" + result.curr);
			},
			finish : function(result) {
				console.log("上传完成");
			}
		});
        console.log(resultMsg);
    });
        



  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-26476625-7"></script>
  <script>
    // add by alsotang@gmail.com
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-26476625-7');
  </script>

</body>

</html>